<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/header.jsp"%>
<title>Insert title here</title>
</head>
<body>
	<div class="layui-anim layui-anim-scale">
	<fieldset class="layui-elem-field layui-field-title">
		<legend>信息维护</legend>
	<!-- 一个form表格 在此表格-->
	<from class="layui-form" action=""> <!-- 允许排在一行  <div class="layui-input-block"></div> 不排在一行 -->
	<div class="layui-input-inline">
		<!-- 给定一个layui的lable样式 -->
		<label class="layui-form-label">编号：</label>
		<div class="layui-input-block">
			<!-- 自己排在一行 -->
			<input type="text" id="bianhao" required lay-verify="required" placeholder="编号" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-input-inline">
		<!-- 给定一个layui的lable样式 -->
		<label class="layui-form-label">名称：</label>
		<div class="layui-input-block">
			<!-- 自己排在一行 -->
			<input type="text" id="name" required lay-verify="required" placeholder="名称" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-input-inline">
		&nbsp;&nbsp;
		<input type="button" class="layui-btn" onclick="openSelect()" value="查询">
		<input type="button" class="layui-btn" onclick="openAdd()" value="添加">
		<input type="hidden" id = "pageIndex" value="1"/>
		<input type="hidden" id = "pageLimit" value="10"/>
	</div>
	</from>
	</fieldset>
	<table class="layui-table">
		<colgroup>
			<col width="150">
			<col width="200">
			<col>
		</colgroup>
		<thead>
			<tr>
				<th>序号</th>
				<th>编号</th>
				<th>部门名称</th>
				<th>电话</th>
				<th>人数</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tbody">
			<tr>
			</tr>
		</tbody>
	</table>
	</div>
	<div id="pageInfoUser" style="text-align: right;padding-right: 30px"></div>
	<script>
		openSelect();
		layui.use('form', function() {
			var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
			form.render();
		});
		function openSelect() {
			var bianhao = $("#bianhao").val();
			var name = $("#name").val();
			var pageIndex = $("#pageIndex").val();
			var pageLimit = $("#pageLimit").val();
			$.ajax({
				url : "/work/DepartServlet",
				data : {
					action : "page",
					bianhao : bianhao,
					name : name,
					pageIndex : pageIndex,
					pageLimit : pageLimit,
					},
				type : "post",
				dataType : "json",
				success : function(data) {
					var curr =  $("#pageIndex").val();
					var limit = $("#pageLimit").val();
					console.log(data)
					setPageInfo('pageInfoUser', data.count, curr, limit, function(obj, first){
						var pageIndex = $("#pageIndex").val(obj.curr);
						var pageLimit = $("#pageLimit").val(obj.limit);
						if(!first){openSelect();}//首次不执行
					})
					$("#tbody").html("");
					var html = "";
					console.log(data)
					$.each(data.data,function(i, dom) {
						var  id = dom.id ? dom.id : '';
						var	name = dom.name ? dom.name: '';
						var tel = dom.tel ? dom.tel: '';
						var count = dom.count ? dom.count: '';
						var temp = "<tr id = 'tr" + ++i + "'>"
						+ "<td id = 'tda" + i + "'>"+ i + "</td>"
						+ "<td id = 'tdb" + i + "'>"+ id + "</td>"
						+ "<td id = 'tdc" + i + "'>"+ name + "</td>"
						+ "<td id = 'tdf" + i + "'>"+ tel + "</td>"
						+ "<td id = 'tdf" + i + "'>"+ count + "</td>"
						+ "<td id = 'tdg" + i + "'>"
						+ "<button type='button' class='layui-btn' onclick='openDialog("+ id+ ")'>修改</button>"
						+ "<button type='button' class='layui-btn' onclick='testdel("+ id + ")'>删除</button>"
						+ "</tr>";
						$("#tbody").append(temp);
						});
					}
					})
		}
		function testdel(id) {
			if (confirm("是否要删除数据？")) {
				$.ajax({
					url : "/work/DepartServlet",
					data : {
						action : "del",
						id : id,
					},
					type : "post",
					dataType : "text",
					success : function(data) {
						layer.msg("删除成功~")
						refresh();
					}
				})
			}
		}
		function openAdd(){
			openLayer('/web/page/department/add.jsp',refresh)
		}
		function refresh(){
			$("#tbody").html("");
			openSelect();
		}
		
		function openDialog(id){
			openLayer('/web/page/department/upd.jsp?code='+id, refresh)
		}
	</script>
</body>
</html>